<!--
    作者：大火兔
    联系：1979788761@qq.com
    时间：2022-03-23
    描述：BlogUi极简主题
-->
<!DOCTYPE html>
<html lang="en">

	<head>
		<!-- 页面编码 -->
		<meta charset="utf-8" />
		<!-- 移动设备优先 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- 兼容Edge模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<!-- 极速模式 -->
		<meta name="renderer" content="webkit" />
		<!-- 标题 -->
		<title>博客测试页-BlogUi极简主题</title>
		<!-- 关键字 -->
		<meta name="keywords" content="BlogUi,博客测试页-BlogUi极简主题" />
		<!-- 描述 -->
		<meta name="description" content="这是BlogUi极简主题博客测试页-BlogUi极简主题" />
		<!-- 作者 -->
		<meta name="author" content="大火兔" />
		<!-- 版权 -->
		<meta name="copyright" content="版权所有 BlogUi All Rights Reserved" />
		<!-- 搜索引擎索引向导 -->
		<meta name="robots" content="all" />
		<!-- 图标 -->
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
		<link rel="icon" type="image/svg+xml" href="favicon.ico" />
		<!-- 引入BlogUi.less -->
		<link rel="stylesheet/less" type="text/css" href="css/blogui.less" />
		<!-- 引入稳定版Less.js -->
		<script src="js/less.min.js"></script>
	</head>

	<body>
		<div class="wrap">
			<div class="topbar">
				顶部测试
			</div>
			<div class="layout">
				<div class="header">
					<div class="navbar">
						<input type="checkbox" id="checkmenu">
						<label for="checkmenu" class="checkbtn">
					   	</label>
						<label class="logo">BlogUi</label>
						<ul class="menu">
							<li>
								<a href="/" class="active">首页</a>
							</li>
							<li>
								<a href="https://dahuotu.gitee.io/blogui/#/download">下载</a>
								<ul class="dropdown-menu">
									<li>
										<a href="https://dahuotu.gitee.io/blogui/#/download?id=git">官方下载</a>
									</li>
									<li>
										<a href="https://dahuotu.gitee.io/blogui/#/download?id=git">码云下载</a>
									</li>
									<li>
										<a href="https://dahuotu.gitee.io/blogui/#/download?id=git">Gitbub</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="https://dahuotu.gitee.io/blogui/#/pages">页宽</a>
							</li>
							<li>
								<a href="https://dahuotu.gitee.io/blogui/#/layouts">布局</a>
							</li>
							<li>
								<a href="https://dahuotu.gitee.io/blogui/#/component">组件</a>
							</li>
							<li>
								<a href="https://dahuotu.gitee.io/blogui/#/theme">主题</a>
							</li>
							<li>
								<a href="https://dahuotu.gitee.io/blogui/#/log">日志</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="box">
					<div class="notice">
						<div class="icon">
							<span class="iconfont icon-notification"></span>
						</div>
						<div class="single">默认单行简短公告演示</div>
					</div>
					<div class="notice">
						<div class="icon">
							<span class="iconfont icon-notification"></span>
						</div>
						<div class="more">多行公告演示，超过2行自动省略，一般用于公告文字较多的情况下...多行公告演示，超过2行自动省略，一般用于公告文字较多的情况下...多行公告演示，超过2行自动省略，一般用于公告文字较多的情况下...多行公告演示，超过2行自动省略，一般用于公告文字较多的情况下...多行公告演示，超过2行自动省略，一般用于公告文字较多的情况下...多行公告演示，超过2行自动省略，一般用于公告文字较多的情况下...多行公告演示，超过2行自动省略，一般用于公告文字较多的情况下...多行公告演示，超过2行自动省略，一般用于公告文字较多的情况下...多行公告演示，超过2行自动省略，一般用于公告文字较多的情况下...</div>
					</div>
					<div class="notice">
						<div class="icon">
							<span class="iconfont icon-notification"></span>
						</div>
						<div class="roll">
							<ul class="list-y">
								<li>
									<a href="#" target="_blank">白天做老板秘书，晚上做老板老婆是什么感受？</a>
								</li>
								<li>
									<a href="#" target="_blank">娘家拆迁分了两套新房，婆婆让我把房本写上小叔子的名</a>
								</li>
								<li>
									<a href="#" target="_blank">外卖员口述：夜班最怕女客户提出这种要求</a>
								</li>
								<li>
									<a href="#" target="_blank">前任一哭，现任必输</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="notice">
						<div class="icon">
							<span class="iconfont icon-notification"></span>
						</div>
						<div class="roll">
							<ul class="list-x">
								<li>
									<a href="#" target="_blank">白天做老板秘书，晚上做老板老婆是什么感受？</a>
								</li>
								<li>
									<a href="#" target="_blank">娘家拆迁分了两套新房，婆婆让我把房本写上小叔子的名</a>
								</li>
								<li>
									<a href="#" target="_blank">外卖员口述：夜班最怕女客户提出这种要求</a>
								</li>
								<li>
									<a href="#" target="_blank">前任一哭，现任必输</a>
								</li>
							</ul>
						</div>
					</div>

					<ul class="bread">
						<li>
							<a href="#" class="iconfont icon-home">首页</a>
						</li>
						<li>
							<a href="#">新闻</a>
						</li>
						<li>正文</li>
					</ul>
				</div>
				<div class="main row">
					<div class="col-lg-9">
						<div class="card">
							<div class="title-tips"><span>文章使用测试</span></div>
							<ul class="article-list">
								<li>
									<div class="imgs">
										<a href="#">
											<img src="images/400x400.jpeg" class="img-respond" />
										</a>
									</div>
									<div class="contents">
										<div class="title">
											<a href="#">BlogUi介绍</a>
										</div>
										<div class="intro">
											<a href="#">BlogUi框架，基于拼图响应式前端框1.0架精简分支开发。优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，专为博客系统（Blog System）打造的前端页面Ui框架，占用资源小、风格极简而优雅、用户只需简单的配置便可随意定制主题风格。</a>
										</div>
										<div class="other">
											<div class="day">2022-03-08</div>
											<div class="view">138</div>
										</div>
									</div>
									<div class="clear"></div>
								</li>
							</ul>
							<div class="article-detail">
								<h2>BlogUi介绍</h2>
								<p class="text-center">时间：2022-03-24 作者：大火兔 来源：BlogUi</p>
								<p>针对博客系统的响应式前端Ui框架</p>
								<p>BlogUi框架，基于拼图响应式前端框1.0架精简分支开发。优秀的HTML、CSS、JS跨屏响应式开源前端框架，使用最新浏览器技术，专为博客系统（Blog System）打造的前端页面Ui框架，占用资源小、风格极简而优雅、用户只需简单的配置便可随意定制主题风格。</p>
								<p>轻巧、极简</p>
								<p>便捷的主题风格按喜好切换</p>
								<p>基于Less编写样式：简单，明了的语法定义，使编写CSS变得非常简单，并且容易维护，不需要为更改一个色值而 查找+替换，只需要更改指定变量。完全可以做到一套编写多套样式，是主题风格编写利器。</p>
								<p>默认模板</p>
								<p>仅支持在现代浏览器中使用的页面模板，在 IE11 及以下显示效果不佳。</p>
								<p>...</p>
								<p>...</p>
								<p>...</p>
							</div>
							<div class="title-tips"><span>评论使用测试</span></div>
							<div class="comments-list">
								<!--主评论-->
								<div class="item">
									<div class="face">
										<img src="images/400x400.jpeg" />
									</div>
									<div class="info">
										<div class="name">
											<span class="nickname">大火兔</span><span class="days">2022-03-10</span>
											<a class="reply">回复</a>
										</div>
										<div class="contents">
											只如初见，顾惜邂逅情缘。那一瞥，是惊鸿素颜。半点轻砂，万种娇妍。卿若不负，浮华一世夜无眠。琵琶语，古道幽情，莫道黯然魂。
										</div>
									</div>
									<div class="clear"></div>
								</div>
								<div class="item">
									<div class="face">
										<img src="images/400x400.jpeg" />
									</div>
									<div class="info">
										<div class="name">
											<span class="nickname">大火兔</span><span class="days">2022-03-10</span>
											<a class="reply">回复</a>
										</div>
										<div class="contents">
											只如初见，顾惜邂逅情缘。那一瞥，是惊鸿素颜。半点轻砂，万种娇妍。卿若不负，浮华一世夜无眠。琵琶语，古道幽情，莫道黯然魂。
										</div>
									</div>
									<div class="clear"></div>
								</div>
								<div class="item">
									<div class="face">
										<img src="images/400x400.jpeg" />
									</div>
									<div class="info">
										<div class="name">
											<span class="nickname">大火兔</span><span class="days">2022-03-10</span>
											<a class="reply">回复</a>
										</div>
										<div class="contents">
											只如初见，顾惜邂逅情缘。那一瞥，是惊鸿素颜。半点轻砂，万种娇妍。卿若不负，浮华一世夜无眠。琵琶语，古道幽情，莫道黯然魂。
											<!--回复评论-->
											<div class="li">
												<div class="face">
													<img src="images/400x400.jpeg" />
												</div>
												<div class="info">
													<div class="name">
														<span class="nickname">大火兔</span><span class="days">2022-03-10</span>
														<a class="reply">回复</a>
													</div>
													<div class="contents">
														只如初见，顾惜邂逅情缘。那一瞥，是惊鸿素颜。半点轻砂，万种娇妍。卿若不负，浮华一世夜无眠。琵琶语，古道幽情，莫道黯然魂。
													</div>
												</div>
												<div class="clear"></div>
											</div>
											<div class="li">
												<div class="face">
													<img src="images/400x400.jpeg" />
												</div>
												<div class="info">
													<div class="name">
														<span class="nickname">大火兔</span><span class="days">2022-03-10</span>
														<a class="reply">回复</a>
													</div>
													<div class="contents">
														只如初见，顾惜邂逅情缘。那一瞥，是惊鸿素颜。半点轻砂，万种娇妍。卿若不负，浮华一世夜无眠。琵琶语，古道幽情，莫道黯然魂。
													</div>
												</div>
												<div class="clear"></div>
											</div>
										</div>
									</div>
									<div class="clear"></div>

								</div>
							</div>
							<div class="comments-box">
								<form>
									<textarea class="input" maxlength="200" placeholder="评论"></textarea>
									<div class="tools">
										<span class="num">0</span>/<span class="sum">200</span>
										<button type="submit" class="button">发表评论</button>
									</div>
								</form>
							</div>
							<div class="title-tips"><span>强提示使用测试</span></div>
							<div class="alert-success">
								默认成功提示
							</div>
							<div class="alert-success">
								<strong>温馨提示</strong>
								<p>
									恭喜道友，成功的泡了一个妞！
								</p>
							</div>
							<div class="alert-error">
								错误警告提示
							</div>
							<div class="alert-error">
								<strong>警告提示</strong>
								<p>
									道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！
								</p>
							</div>
							<div class="title-tips"><span>按钮类使用测试</span></div>
							<button class="button">普通按钮</button>
							<button class="button"><i class="iconfont icon-search"></i>搜索</button>
							<button class="button"><i class="iconfont icon-download"></i>下载</button>
							<button class="button"><i class="iconfont icon-copy"></i>复制</button>
							<button class="button"><i class="iconfont icon-zan"></i>点赞</button>
							<button class="button"><i class="iconfont icon-share"></i>分享</button>
							<button class="button"><i class="iconfont icon-zanshang"></i>赞赏</button>
							<button class="button"><i class="iconfont icon-user"></i>联系</button>
							<button class="button button-small">特小按钮</button>
							<button class="button button-big">超大按钮</button>
							<br />
							<button class="button button-block">宽度自适应</button>
							<br />
							<!--html5 button标签方式-->
							<button class="button" disabled="disabled"><i class="iconfont icon-download"></i>禁止下载</button>
							<!--html4 input方式-->
							<input class="button" type="button" disabled="disabled" value="禁止下载" />
							<br />
							<div class="title-tips"><span>列表类使用测试</span></div>
							<ul class="pagination">
								<li>
									<a href="#" class="iconfont icon-left"></a>
								</li>
								<li>
									<a href="#">1</a>
								</li>
								<li class="active">
									<a href="#">2</a>
								</li>
								<li>
									<a href="#">3</a>
								</li>
								<li>
									<a href="#">4</a>
								</li>
								<li>
									<a href="#">5</a>
								</li>
								<li>
									<a href="#" class="iconfont icon-more"></a>
								</li>
								<li>
									<a href="#" class="iconfont icon-right"></a>
								</li>
							</ul>
						</div>
						<br />
						<div class="tabs-y">
							<ul class="head">
								<li class="checked" data-checked="#tab1">tab1</li>
								<li data-checked="#tab2">tab2</li>
								<li data-checked="#tab3">tab3</li>
							</ul>
							<ul class="body">
								<li class="checked" id="tab1">道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！道友，您泡的那名妞已有主，请道友自重！ </li>
								<li id="tab2">panel2</li>
								<li id="tab3">panel3</li>

							</ul>
							<div class="clear"></div>
						</div>
					</div>
					<div class="col-lg-3">
						<ul class="aside">
							<li>
								<div class="panel">
									<div class="head">
										搜索
									</div>
									<div class="body">
										<div class="search">
											<input class="inp" type="text" placeholder="搜索.." name="search">
											<button class="btn" type="submit"><i class="iconfont icon-search"></i></button>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="panel">
									<div class="head">
										个人资料
									</div>
									<div class="body">
										<div class="text-center">
											<img class="face-round" width="50" height="50" src="images/Logo.png" alt="BlogUi作者" />
											<h2><a href="https://www.dahuotu.com" target="_blank" title="访问这货的主页">大火兔</a></h2>
											<p>死打字的，打了的字比飞机都多...</p>
										</div>
									</div>
								</div>
							</li>
							<li>
								<div class="panel">
									<div class="head">
										热门文章
									</div>
									<div class="body">
										<ul class="list">
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/download" target="_blank" title="BlogUi使用说明之下载使用">BlogUi使用文档</a>
											</li>
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/template" target="_blank" title="BlogUi使用说明之页面模板">BlogUi使用说明之页面模板</a>
											</li>
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/pages" target="_blank" title="BlogUi使用说明之常用页宽">BlogUi使用说明之常用页宽中的常用类型</a>
											</li>
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/layouts" target="_blank" title="BlogUi使用说明之常用布局">BlogUi常用布局</a>
											</li>
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/component" target="_blank" title="BlogUi使用说明之常用组件">BlogUi使用说明之常用组件、常用部件等集合整理</a>
											</li>
										</ul>
									</div>
								</div>
							</li>
							<li>
								<div class="panel">
									<div class="head">
										最新文章
									</div>
									<div class="body">
										<ul class="list">
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/download" target="_blank" title="BlogUi使用说明之下载使用">BlogUi使用文档</a>
											</li>
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/template" target="_blank" title="BlogUi使用说明之页面模板">BlogUi使用说明之页面模板</a>
											</li>
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/pages" target="_blank" title="BlogUi使用说明之常用页宽">BlogUi使用说明之常用页宽中的常用类型</a>
											</li>
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/layouts" target="_blank" title="BlogUi使用说明之常用布局">BlogUi常用布局</a>
											</li>
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/component" target="_blank" title="BlogUi使用说明之常用组件">BlogUi使用说明之常用组件、常用部件等集合整理</a>
											</li>
										</ul>
									</div>
								</div>
							</li>
							<li>
								<div class="tabs">
									<ul class="head">
										<li class="checked" data-checked="#tabNew">最新评论</li>
										<li data-checked="#tabHot">热门评论</li>
									</ul>
									<ul class="body">
										<!--id唯一，多个选项卡不能出现重复的id，否则切换效果失效，这是jQuery常识-->
										<li class="checked" id="tabNew">
											<ul class="list">
												<li>
													<a href="https://dahuotu.gitee.io/blogui/#/download" target="_blank" title="BlogUi使用说明之下载使用">BlogUi使用文档最新评论</a>
												</li>
												<li>
													<a href="https://dahuotu.gitee.io/blogui/#/template" target="_blank" title="BlogUi使用说明之页面模板">BlogUi使用说明之页面模板</a>
												</li>
												<li>
													<a href="https://dahuotu.gitee.io/blogui/#/pages" target="_blank" title="BlogUi使用说明之常用页宽">BlogUi使用说明之常用页宽中的常用类型</a>
												</li>
												<li>
													<a href="https://dahuotu.gitee.io/blogui/#/layouts" target="_blank" title="BlogUi使用说明之常用布局">BlogUi常用布局</a>
												</li>
												<li>
													<a href="https://dahuotu.gitee.io/blogui/#/component" target="_blank" title="BlogUi使用说明之常用组件">BlogUi使用说明之常用组件、常用部件等集合整理</a>
												</li>
											</ul>
										</li>
										<li id="tabHot">
											<ul class="list">
												<li>
													<a href="https://dahuotu.gitee.io/blogui/#/download" target="_blank" title="BlogUi使用说明之下载使用">BlogUi使用文档热门评论</a>
												</li>
												<li>
													<a href="https://dahuotu.gitee.io/blogui/#/template" target="_blank" title="BlogUi使用说明之页面模板">BlogUi使用说明之页面模板</a>
												</li>
												<li>
													<a href="https://dahuotu.gitee.io/blogui/#/pages" target="_blank" title="BlogUi使用说明之常用页宽">BlogUi使用说明之常用页宽中的常用类型</a>
												</li>
												<li>
													<a href="https://dahuotu.gitee.io/blogui/#/layouts" target="_blank" title="BlogUi使用说明之常用布局">BlogUi常用布局</a>
												</li>
												<li>
													<a href="https://dahuotu.gitee.io/blogui/#/component" target="_blank" title="BlogUi使用说明之常用组件">BlogUi使用说明之常用组件、常用部件等集合整理</a>
												</li>
											</ul>
										</li>
									</ul>
								</div>
							</li>
							<li>
								<div class="panel">
									<div class="head">
										标签分类
									</div>
									<div class="body">
										<ul class="tag-list">
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/download" target="_blank" title="BlogUi使用说明之推荐下载">推荐下载</a>
											</li>
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/template" target="_blank" title="BlogUi使用说明之模板">模板</a>
											</li>
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/pages" target="_blank" title="BlogUi使用说明之页面">页面</a>
											</li>
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/component" target="_blank" title="BlogUi使用说明之组件">组件</a>
											</li>
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/log" target="_blank" title="BlogUi使用说明之更新日志">更新日志</a>
											</li>
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/theme" target="_blank" title="BlogUi使用说明之插件下载">插件下载</a>
											</li>
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/layouts" target="_blank" title="BlogUi使用说明之常用布局">布局</a>
											</li>
											<li>
												<a href="https://dahuotu.gitee.io/blogui/#/theme" target="_blank" title="BlogUi使用说明之主题">主题</a>
											</li>
											<!-- 切记在使用列表标签时这里一定要加，此处是为了清除浮动，列表标签会根据父容器宽度自行换行 -->
											<div class="clear"></div>
										</ul>
									</div>
								</div>
							</li>
							<li>
								<div class="panel">
									<div class="head">
										友情链接
									</div>
									<div class="body">
										<ul class="list-num">
											<li>
												<a href="https://www.dahuotu.com" target="_blank" title="BlogUi作者大火兔的主页">大火兔</a>
											</li>
											<li>
												<a href="https://dahuotu.gitee.io/blogui" target="_blank" title="一款针对博客系统的响应式前端Ui框架">BlogUi</a>
											</li>
											<li>
												<a href="https://www.neuralink.wiki" target="_blank" title="脑机技术学习笔记wiki">脑机技术wiki</a>
											</li>
											<li>
												<a href="https://www.pintuer.com" target="_blank" title="拼图大前端">拼图大前端</a>
											</li>
											<li>
												<a href="https://www.pintuer.com/tools/favicon/" target="_blank" title="在线制作favicon图标">在线制作favicon图标</a>
											</li>
										</ul>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="footer">
					<div class="text-center">
						版权所有 ©
						<a href="https://dahuotu.gitee.io/blogui" target="_blank">BlogUi.cn</a> All Rights Reserved<br /> 深ICP备：
						<a href="#" target="_blank">380959609</a>
					</div>
				</div>
				<div class="topbar">
					底部测试
				</div>
			</div>
		</div>
	</body>
	<!-- 引入兼容IE8的jQuery版本 -->
	<script src="js/jquery-1.12.4.min.js"></script>
	<!-- 引入BlogUi框架Js -->
	<script src="js/blogui.js"></script>
	<!-- 引入你的JS -->
	<script src="js/your.js"></script>

</html>